<template>
    <div class="login-logo">
        <div class="login">
            <el-form ref="editForm" label-width="80px" :inline="true" class="login-container" :model="userForm" :rules="rules">
                <div class="login-title">LOG IN</div>
                <el-form-item label="" prop="username" for="username">
                    <el-input v-model="userForm.username" class="username" :placeholder="errMsg"/>
                </el-form-item>
                <el-form-item label="" prop="password" for="password">
                    <el-input id="password" v-model="userForm.password" placeholder="请输入密码" class="password" show-password></el-input>
                </el-form-item>
                <el-form-item label="" prop="verifyCode" for="verifyCode">
                    <div style="width: 400px;height: 45px;margin: auto;">
                        <el-input id="verifyCode" v-model="userForm.verifyCode" placeholder="请输入验证码"
                            class="verifyCode"></el-input>
                        <el-image style="float: right;width: 120px;height: 30px;border-radius: 10px;"
                            :src="captcha.captchaUrl" @click="getCaptch" >
                        </el-image>
                    </div>
                </el-form-item>
                <div class="login-btn">
                    <el-button @click="loginBtn()" class="loginBtn" type="primary" style="width:200px;letter-spacing: 0.2em;height: 45px;">Login</el-button>
                    <el-button @click="resetForm()" class="regsiter" style="width:65px;height:45px;">重置</el-button>
                </div>
                <div class="login-register">
                    <span>请点击这里进行用户<el-button type="text" class="registenBtn">注册</el-button></span>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import axios from 'axios';
    import { reactive, ref, onMounted } from 'vue';
    import {useRouter} from 'vue-router';
    import { ElMessage } from 'element-plus';
    import { userapi } from '@/api/userapi';
    import { useUserStore } from '@/stores/userstore';

    interface UserForLogIn {
        userId:number,
        username:string,
        password:string,
        verifyCode:string,
        captchaId:string,
        token:string,
        imgPath:string
    }

    interface Captcha {
        captchaUrl:string,
        captchaId:string
    }

    //创建状态对象 在登陆成功后用pinia将该状态进行储存
    let store = useUserStore();

    const router = useRouter();
    //定义验证码对象，用于接收与验证码相关数据
    const captcha = ref<Captcha>({
        captchaUrl:"", //验证码Base64字符串
        captchaId:""
    })

    //登录用户对象
    const userForm = ref<UserForLogIn>({
        userId:0,
        username:'',
        password:'',
        verifyCode:'',
        captchaId:'',
        token:'',
        imgPath:''
    });
    //登录失败，显示错误信息
    const errMsg = ref("请输入账号");

    const rules = {
        username:
            [
                { required: true, message: '请输入用户名称', trigger: 'blur' },
                { min: 3, max: 16, message: '字符长度在3都16个之间', trigger: 'blur' }
            ],
        password:
            [
                { required: true, message: '请输入用户密码', trigger: 'blur' },
                { min: 3, message: '密码长度不能低于3字符', trigger: 'blur' }
            ],

    }
    const loginBtn = async () => {
        console.log(userForm.value);
        let res = await userapi.logIn(userForm.value);
        console.log("res是", res);
        if(res.data.success) {
            userForm.value.userId = res.data.data.userId;
            userForm.value.imgPath = res.data.data.imgPath;
            userForm.value.token = res.data.data.accessToken;
            console.log("登陆成功");
            
            //console.log(userForm.value.token);
            //登陆成功后更新state 到pinia状态管理的userstore中
            store.logIn(userForm.value);
            succMsg();
            console.log(store.username);
            console.log(store.imgPath);
            
            router.push("/mainframeview")
        } else {
            console.log(res.data.msg);
            failMsg(res.data.msg);
        }
    }
    const failMsg = (msg:string) =>{
        ElMessage.error(msg)
    }
    const succMsg = () => {
        ElMessage({
            message: '登陆成功',
            type: 'success',
        })
    }
    const resetForm = () => { //重置方法
        userForm.value.username = '';
        userForm.value.password = '';
        userForm.value.verifyCode='';
    }

     const getCaptch = async () => {
        let res = await userapi.createCaptch();
        console.log(res);
        if(res.data.success){
            captcha.value.captchaUrl = res.data.data.captchaUrl;
            captcha.value.captchaId = res.data.data.captchaId;
            userForm.value.captchaId = res.data.data.captchaId;
        }else {
            ElMessage.error("加载验证码失败");
        }
    }

    //vue对象挂载到元素时，自动触发onMounted函数，在函数中调用获取验证码方法
    onMounted(() => {
        getCaptch();
    })

</script>


<style>
    .login-logo {
        width: 100%;
        height: 735px;
        background-image: url("../assets/img2.webp");
        background-size: 100%;

    }

    .login {
        height: 350px;
        width: 400px;
        text-align: center;
        position: absolute;
        top: 35%;
        left: 50%;
        margin-left: -160px;
        margin-top: -160px;
        box-shadow: 0 0 25px rgb(67, 46, 37);
        border-radius: 10px;
        border: 1px solid rgb(170，170，170);
    }

    .login-title {
        text-align: center;
        margin: 20px 1px;
        font-size: 30px;
        font-weight: bold;
        color: blue;
        letter-spacing: 0.5em;
    }
    .el-form--inline .el-form-item {
        /* 设置用户名和密码框宽 */
        width: 280px;
    }
    .username {
        font-weight: bolder;
        margin-left: 1px;
        height: 45px;
        border-radius: 5px;
    }

    .password {
        font-weight: bolder;
        margin-left: 1px;
        height: 45px;
        width: 400px;
        border-radius: 5px;
        outline: none;

    }

    .login-btn {
        width: 280px;
        margin-left: 45px;
        text-align: left;
    }

    .login-register {
        margin-top: 5px;
        width: 280px;
        margin-left: 45px;
        text-align: left;
    }

    .login-register span {
        font-size: 13px;
    }

    .registenBtn {
        color: blue;
        cursor: pointer;
    }

    body {
        margin: 0px;
    }
</style>